<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <title>当日情况采集</title>
    <link rel="stylesheet" href="{% static 'css/ydui.css' %}" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XUJBZ-GZ2WI-KUZGV-5AK4Z-LPS5V-H4BIX"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"
            integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    {#    <script src="{% static 'js/ydui.flexible.js' %}" charset="UTF-8"></script>#}
    <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <style>
        body {
            background-color: #f7f7f7;
        }

        .footer {
        {#position: fixed;#} bottom: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
        {#vertical-align: center;#}

        }

        .footer-p {
            display: flex;
            flex-direction: column;
            font-size: 12px;
            color: #5a6268;
            justify-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">青岛大学 每日疫情上报</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">表单 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="../anysis/">统计 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="../index/">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="editMap" style="width:0px;height:0px;" onclick="enlarge()" hidden></div>
    <form method="post" action="../form3/" id="savehistory">
        {% csrf_token %}
        <div class="form-group">
            <label for="area">您目前所在地区</label>
            <div class="form-row" id="area">
                <div class="form-group col-md-4">
                    <label for="location">是否校内</label>
                    <select class="custom-select" name="isinschool">
                        <option value="0" onclick="document.getElementById('campus').hidden=false;document.getElementById('J_Address').required=false;document.getElementById('J_Address').hidden=true">校内
                        </option>
                        <option value="1" onclick="document.getElementById('campus').hidden=true;document.getElementById('campus').required=false;document.getElementById('J_Address').required=true;document.getElementById('J_Address').hidden=false">校外
                        </option>
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label for="location">详细地址</label>
                    <select class="custom-select" name="location" id="campus" required>
                        <option value="浮山校区">浮山校区
                        </option>
                        <option value="松山校区">松山校区
                        </option>
                        <option value="金家岭校区">金家岭校区
                        </option>
                    </select>
                    <input type="text" class="form-control" name="location" id="J_Address"  hidden>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="location">您近十四天是否到过疫区</label>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio21" name="ispassed" class="custom-control-input optional"
                       value="0" onclick="hide('#planedtravel_time_group','#planedtravel_time_group')" checked required>
                <label class="custom-control-label" for="customRadio21">未到过疫区</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio9" name="ispassed" class="custom-control-input optional"
                       value="1" onclick="show('#planedtravel_time_group','#planedtravel_time_group')">
                <label class="custom-control-label" for="customRadio9">到过武汉</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio20" name="ispassed" class="custom-control-input optional"
                       value="2" onclick="show('#planedtravel_time_group','#planedtravel_time_group')">
                <label class="custom-control-label" for="customRadio20">到过湖北</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio10" name="ispassed" class="custom-control-input optional"
                       value="3" onclick="show('#planedtravel_time_group','#planedtravel_time_group')">
                <label class="custom-control-label" for="customRadio10">路过湖北</label>
            </div>

        </div>
        <div id="planedtravel_time_group">
            <div class="form-group">
                <label for="planedtravel_time">您抵达疫区的日期</label>
                <input type="date" class="form-control" id="planedtravel_time" required
                       name="planedtravel_time">
            </div>
            <div class="form-group">
                <label for="planedleave_time">您（预计）离开疫区的日期</label>
                <input type="date" class="form-control" id="planedleave_time" required
                       name="planedleave_time">
            </div>
        </div>

        <div class="form-group">
            <label for="is_go_to_outer">近14天是否去过外地</label>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio2" name="is_go_to_outer" class="custom-control-input"
                       onclick="hide('#valid')" value="0" checked required>
                <label class="custom-control-label" for="customRadio2">否</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio1" name="is_go_to_outer" class="custom-control-input"
                       onclick="show('#valid')" value="1">
                <label class="custom-control-label" for="customRadio1">是</label>
            </div>

        </div>

        <div class="form-group">
            <label for="isplanedtravel">您是否有返校计划</label>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio12" name="isplanedtravel" class="custom-control-input" value="0"
                       onclick="hide('#for_return','#for_return')" checked required>
                <label class="custom-control-label" for="customRadio12">否</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio11" name="isplanedtravel" class="custom-control-input"
                       value="1"
                       required onclick="show('#for_return','#for_return')">
                <label class="custom-control-label" for="customRadio11">是</label>
            </div>

        </div>
        <div id="for_return">
            <div class="form-group">
                <label for="plan_back_time">您计划返校时间</label>
                <input type="date" class="form-control optional" id="plan_back_time" required name="plan_back_time">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">您计划返校使用的交通工具</label>
                <select class="custom-select" name="trans_type">
                    <option value="0">飞机+火车</option>
                    <option value="1">飞机+长途汽车</option>
                    <option value="2">火车+长途汽车</option>
                    <option value="3">火车</option>
                    <option value="4">长途汽车</option>
                    <option value="5">自驾</option>

                </select>
            </div>
        </div>


        <button type="submit" class="btn btn-primary" id="submit">下一步</button>
    </form>
</div>
<footer class="footer">
    <div class="footer-p">
        <p>青岛大学 版权所有 ©2020</p>
        <p>电子邮件：<a href="mailto:ecampus@qdu.edu.cn">ecampus@qdu.edu.cn</a></p>
        <p>青岛大学 智慧校园服务创新协会 提供技术支持</p>

    </div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script>
    var searchService, markers = [];
    var geocoder = null;

    var init = function () {
        var center = new qq.maps.LatLng(39.936273, 116.44004334);
        var map = new qq.maps.Map(document.getElementById('editMap'), {
            center: center,
            zoom: 13
        });

        //调用地址解析类，根据地址定位
        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                console.log(result);
                map.setCenter(result.detail.location);
                map.zoomBy(12);//设置指定等级
                var marker = new qq.maps.Marker({
                    map: map,
                    position: result.detail.location
                });
                var infoWindow = new qq.maps.InfoWindow({
                    map: map,
                    position: result.detail.location,
                    offset: {x: -8, y: -32}, //设置信息窗相对position偏移像素
                    content: "<div style='width:200px;height:70px;'><p>" + result.detail.nearPois[0].name + "</p><p>地址：" + result.detail.nearPois[0].address + "</p></div>",
                    visible: true
                });
            }
        });

        //设置Poi检索服务，用于本地检索、周边检索
        searchService = new qq.maps.SearchService({
            //检索成功的回调函数
            complete: function (results) {
                //设置回调函数参数
                var pois = results.detail.pois;
                var infoWin = new qq.maps.InfoWindow({
                    map: map
                });
                var latlngBounds = new qq.maps.LatLngBounds();
                var table = ""
                $("#information").css('display', 'block');
                for (var i = 0, l = pois.length; i < l; i++) {
                    var poi = pois[i];
                    //扩展边界范围，用来包含搜索到的Poi点
                    latlngBounds.extend(poi.latLng);
                    (function (n) {
                        var marker = new qq.maps.Marker({
                            map: map
                        });
                        marker.setPosition(pois[n].latLng);
                        marker.setTitle(i + 1);
                        markers.push(marker);
                        table += "<dd value='" + i + "' class=\"dropdown-item\" onclick='info(\"" + pois[n].latLng + "\",\"" + pois[n].name + "\")'>" + pois[n].name + "</dd>";

                        qq.maps.event.addListener(marker, 'click', function () {
                            $("#information").css('display', 'none');
                            infoWin.open();
                            infoWin.setContent('<div style="width:200px;height:70px;"><p>' + pois[n].name + '</p><p>地址：' + pois[n].address + '</p></div>');
                            infoWin.setPosition(pois[n].latLng);
                        });
                    })(i);
                }
                $("#information").html(table)
                //调整地图视野
                map.fitBounds(latlngBounds);
            },
        });

    }

    //清除地图上的marker
    function clearOverlays(overlays) {
        var overlay;
        while (overlay = overlays.pop()) {
            overlay.setMap(null);
        }
    }

    //设置搜索的范围和关键字等属性
    function searchKeyword() {
        var keyword = document.getElementById("keyword").value;
        if (keyword == "") {
            //为空无数据
            $("#information").css('display', 'none');
            $("#information").html("");
        }
        clearOverlays(markers);
        var region = "杭州";
        //根据输入的城市设置搜索范围
        searchService.setLocation(region);
        //根据输入的关键字在搜索范围内检索
        searchService.search(keyword);
        //根据输入的关键字在圆形范围内检索
        searchService.searchNearBy(keyword, region, 2000);
    }

    //点击搜索结果显示信息窗口
    function info(latLng, name) {
        clearOverlays(markers);
        $("#information").css('display', 'none');
        $("#keyword").val(name);//下拉地址显示在输入框
        var latlngStr = latLng.split(",", 2);
        var lat = parseFloat(latlngStr[0]);
        var lng = parseFloat(latlngStr[1]);
        var latLn = new qq.maps.LatLng(lat, lng);
        //方法获取位置信息值
        geocoder.getAddress(latLn);
    }

    //点击其他位置隐藏下拉框
    $(".body").bind("click", function () {
        $("#information").css('display', 'none');
    });
</script>
<script>
    function hide(slector, required) {
        $(slector).hide();
        $(required+" > * input").removeAttr("required");
    }

    function show(slector, required) {
        $(slector).show();
        $(required+" > * input").attr("required", true);
    }

</script>
<script>
    {#$(function () {#}
    {#    var localMsg;#}
    {#    if (window.localStorage.formHistory) {#}
    {#        localMsg = JSON.parse(window.localStorage.formHistory);#}
    {#    }#}
    {#    if (localMsg && localMsg.length >= 1) {#}
    {#        var realIndex = 0;#}
    {#        for (var i = 0; i < $('#savehistory input').length; i++) {#}
    {#            if ($($('#savehistory input')[i])[0].type == 'text') {#}
    {#                $($('#savehistory input')[i]).val(localMsg[realIndex].text);#}
    {#                realIndex++;#}
    {#            } else if ($($('#savehistory input')[i])[0].type == 'radio') {#}
    {#                $($('#savehistory input')[i]).prop('checked', localMsg[realIndex].radio);#}
    {#                $($('#savehistory input')[i]).click();#}
    {#                //todo: 添加自动移除元素代码#}
    {#                realIndex++;#}
    {#            } else if ($($('#savehistory input')[i])[0].type == 'checkbox') {#}
    {#                $($('#savehistory input')[i]).prop('checked', localMsg[realIndex].checkbox);#}
    {#                $($('#savehistory input')[i]).click();#}
    {#                realIndex++;#}
    {#            }#}
    {#        }#}
    {#    }#}
    {#    $('#submit').click(function () {#}
    {#        var history = [];#}
    {#        window.localStorage.clear();#}
    {#        window.localStorage.formHistory = '';#}
    {#        for (var i = 0; i < $('#savehistory input').length; i++) {#}
    {#            if ($($('#savehistory input')[i])[0].type == 'text') {#}
    {#                history.push({"text": $($('#savehistory input')[i]).val()})#}
    {#            } else if ($($('#savehistory input')[i])[0].type == 'radio') {#}
    {#                history.push({"radio": $($('#savehistory input')[i]).prop('checked') ? 'checked' : ''})#}
    {#            } else if ($($('#savehistory input')[i])[0].type == 'checkbox') {#}
    {#                history.push({"checkbox": $($('#savehistory input')[i]).prop('checked') ? 'checked' : ''})#}
    {#            }#}
    {#        }#}
    {#        console.log(history)#}
    {#        window.localStorage.formHistory = JSON.stringify(history)#}
    {#    })#}
</script>

<script>
    window.onload = function () {
        init();
        hide('#planedtravel_time_group','#planedtravel_time_group');
        hide('#for_return','#for_return');
        hide('#valid');


    }
</script>
<script src="{% static 'js/ydui.citys.js' %}"></script>
<script src="{% static 'js/ydui.js' %}"></script>
<script>
    !function () {
        var $target = $('#J_Address');

        $target.citySelect();

        $target.on('click', function (event) {
            event.stopPropagation();
            $target.citySelect('open');
        });

        $target.on('done.ydui.cityselect', function (ret) {
            console.log(ret)
            $(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    }();
</script>
</body>
</html>